<template>
  <button class="m-button" :class="getClassName()" :disabled="option.disabled">
    <i v-if="option.loading" class="loading-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
        <path fill="#fff"
          d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z">
        </path>
      </svg>
    </i>
    <slot></slot>
    <i v-if="option.arrow" class="hover-arrow">
      <svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
        <g clip-path="url(#clip0_1630_2381)">
          <path
            d="M9.73404 0.234569C9.42097 0.547643 9.42097 1.05299 9.73404 1.36607L15.5687 7.20072H1.5005C1.05857 7.20072 0.700195 7.55909 0.700195 8.00102C0.700195 8.44295 1.05857 8.80132 1.5005 8.80132H15.5687L9.73404 14.636C9.42097 14.9491 9.42097 15.4544 9.73404 15.7675C10.0471 16.0805 10.5525 16.0805 10.8655 15.7675L18.0652 8.56778C18.1397 8.49429 18.1981 8.4057 18.2384 8.30705C18.2787 8.21041 18.2998 8.10672 18.2998 8.00203C18.2998 7.89834 18.2787 7.79365 18.2384 7.696C18.1971 7.59735 18.1387 7.50977 18.0652 7.43527L10.8655 0.233562C10.5525 -0.0785052 10.0471 -0.0785052 9.73404 0.233562V0.234569Z"
            fill="white" />
        </g>
        <defs>
          <clipPath id="clip0_1630_2381">
            <rect width="17.5996" height="16" fill="white" transform="translate(0.700195)" />
          </clipPath>
        </defs>
      </svg>
    </i>
  </button>
</template>

<script setup>
import { reactive, watch } from 'vue';

const props = defineProps({
  // 箭头
  arrow: {
    type: Boolean,
    default: false
  },
  // 类型
  type: {
    type: String,
    default: 'primary'
  },
  // 镂空
  plain: {
    type: Boolean,
    default: false
  },
  // 加载中
  loading: {
    type: Boolean,
    default: false
  },
  // 禁用
  disabled: {
    type: Boolean,
    default: false
  }
});

const option = reactive({
  arrow: props.arrow,
  disabled: props.disabled,
  loading: props.loading,
});


watch(() => props.loading, (newV) => {
  option.loading = newV;
  if (newV) {
    option.arrow = false;
    option.disabled = true;
  } else {
    option.arrow = props.arrow;
    option.disabled = props.disabled;
  }
}, { immediate: true });

const getClassName = () => {
  let className = props.type;
  if (props.plain) {
    className += '-plain';
  }
  if (props.loading) {
    className += ' loading';
  }
  if (props.disabled) {
    className = 'm-button-disabled';
  }
  return className;
}

</script>

<style lang="scss" scoped>
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.m-button {
  border-radius: 4px;
  outline: none;
  border: none;
  padding: 12px 24px;
  cursor: pointer;
  color: var(--m-light-color);
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.16px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 12px;
  vertical-align: middle;

  &:nth-child(1) {
    margin-left: 0;
  }

  &:hover {

    .hover-arrow {
      display: inline-block;
      opacity: 1;
      height: 100%;
      width: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 10px;
    }
  }

  .hover-arrow {
    margin-left: 0;
    opacity: 0;
    width: 0;
    transition: width .3s ease;
  }

  .loading-icon {
    display: inline-block;
    height: 100%;
    width: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    >svg{
      animation: loading 2s linear infinite;
    }
  }

}

.primary {
  background: var(--m-primary-gradient);

  &:hover {
    background: var(--m-primary-hover);
  }

  &:active {
    background: var(--m-primary-active);
  }
}

.warning {
  background: var(--m-warning-gradient);

  &:hover {
    background: var(--m-warning-hover);
  }

  &:active {
    background: var(--m-warning-active);
  }
}

.info {
  background: var(--m-dark-color2);
  color: var(--m-light-color)
}

.primary-plain {
  background: var(--m-primary-light);
  color: var(--m-primary-color);

  &:hover {
    background: var(--m-primary-color);
    color: var(--m-light-color);
  }
}

.warning-plain {
  background: var(--m-warning-light);
  color: var(--m-warning-color);

  &:hover {
    background: var(--m-warning-color);
    color: var(--m-light-color);
  }
}

.info-plain {
  background: var(--m-light-color2);
  color: var(--m-dark-color2);

  &:hover {
    background: var(--m-dark-color2);
    color: var(--m-light-color);
  }
}

.loading {
  cursor: default;
  opacity: 0.7;
}

.m-button-disabled {
  background: var(--m-btn-disabled-bg-color);
  color: var(--m-btn-disabled-color);
  cursor: not-allowed;
}
</style>